<template>
    <div class="topic-1 all-bj">
      <div class="content">
        <div class="bj">
          <div class="title">
            <p>{{list.question}}</p>
          </div>
          <div class="info">
            <ul>
              <li v-for="(item,key) in list.selItems" :key="key">
                <input type="radio"  v-model="radioValue" :value="item.id"  @click="radioClick(item.id)">
                <p  :class="{optionbg_click : item.id == radioValue}" ><img :src="item.url" alt=""><span>{{key}} {{item.title}}</span></p>
                <!--<input type="button" v-model="radioValue" :value="item" @click="radioClick(item)" >-->
              </li>
              <div class="clearfix"></div>
            </ul>
          </div></div>
      </div>
      <div class="btn">
        <a @click="previous('/Topic_3')"></a>
        <a @click="next('/Topic_5')"></a>
      </div>
      <div class="bottom-img">
  <!--      <img src="../../assets/img/Q4_slices/bottomimage_Q4@2x.png" alt="">-->
      </div>
      <div class="alert" v-if="alertType">
        <div class="alert_content"><p>请选择一个选项<br>以便帮您更准确的选酒哦</p><span @click="alertType = false"><img src="../../assets/img/button_status/ic_close@2x.png" alt=""></span></div>
        <div class="alert_bottom"><a @click="alertType = false"></a></div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      list: '',
      radioValue: '',
      options: '',
      alertType: false,
      locationData: ''
    }
  },
  methods: {
    radioClick (value) {
      const obj = JSON.parse(sessionStorage.getItem('options')) || {}
      obj.配餐 = {value}
      sessionStorage.setItem('options', JSON.stringify(obj))
    },
    next (path) {
      if (this.radioValue !== '') {
        this.$router.push(path)
      } else {
        this.alertType = true
      }
    },
    previous (path) {
      this.logs('上一题')
      this.$router.push(path)
    },
    getUrlParam (name, url) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = url.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return ''
    },
    location () {
      const that = this
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          function (position) {
            var longitude = position.coords.longitude
            var latitude = position.coords.latitude
            const str = longitude + ',' + latitude
            that.locationData = str
          },
          function (e) {
            var msg = e.code
            var dd = e.message
            console.log(msg)
            console.log(dd)
          }
        )
      }
    },
    logs (opEvent) {
      const that = this
      const logs = {
        'module': '活动',
        'sub_module': '京东智能选酒',
        'op_event': opEvent,
        'query_column': location.href,
        'source': this.getUrlParam('source', location.href),
        'useragent': navigator.userAgent,
        'geo_location': that.locationData
      }
      const params = JSON.stringify(logs)
      const logsUrl = `${location.protocol}//recomm.9kacha.com/record_log.php`
      this.$ajax.post(logsUrl, params).then(res => {
        console.log(res)
      }, err => {
        console.log(err)
      })
    }
  },
  created () {
    this.list = JSON.parse(sessionStorage.getItem('requestData')).配餐
    if (sessionStorage.getItem('options') && JSON.parse(sessionStorage.getItem('options')).配餐) {
      this.radioValue = JSON.parse(sessionStorage.getItem('options')).配餐.value
    }
    this.location()
  }
}
</script>

<style scoped lang="less">
  @import "../../lib/less/variable.less";
.topic-1{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  button:0;
  right: 0;
  .content{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    .pt(25);
    .bj{
      .h(414);
      background: url("../../assets/img/Q4_slices/Q4number@2x.png") no-repeat  center center;
      background-size:contain;
      background-clip: border-box;
      .pt(45);
      .title{
        p{
          .h(36);
          .lh(36);
          display: inline-block;
          width: 78.14%;
          background: url("../../assets/img/button_status/questionbg@2x.png") no-repeat center;
          background-size:contain;
          background-clip: border-box;
          .fs(15);
          color: #553317;
          font-weight: bold;
          font-family: PingFangSC;
          text-align: left;
          .pl(20);
        }
      }
    }
  }
  .info{
    width: 100%;
    ul{
      width: 100%;
      .padding(5,25);
  li{
    width: 100%;
    text-align: center;
    margin: auto;
    position: relative;
  .pt(10);
  input[type="radio"] {
    opacity: 0;
    width: 100%;
  .h(30);
    display: inline-block;
    position: absolute;
    left: 0;
  .bottom(5);
  }

  p{
    width: 69.33%;
    display: inline-block;
  .h(36);
  .lh(36);
    background: url("../../assets/img/button_status/optionbg_default@2x.png") no-repeat center;
    background-size:contain;
    background-clip: border-box;
  .fs(14);
    color: #553317;
    font-weight: bold;
    font-family: PingFangSC;
    text-align: left;
  img{
  .w(35);
    object-fit: cover;
    position: relative;
  .top(-5);
  .left(10);
  }
  }
  p.optionbg_click{
    background-image: url("../../assets/img/button_status/optionbg_click@2x.png");
  }
  span{
    vertical-align: top;
  .ml(15)
  }
  }

    }
  }
  .btn{
    width: 100%;
    position: relative;
    z-index: 999;
    a{
      .w(120);
      .h(60);
      display: inline-block;
      text-align: center;
      width: 32%;
      position: absolute;
      .top(-30);
      background: url("../../assets/img/button_status/btn_last@2x.png")no-repeat center;
      background-size: contain;
      background-clip: border-box;
    }
    a:first-child{
      .left(50)
    }
    a:last-child{
      .right(50);
      background: url("../../assets/img/button_status/btn_next@2x.png")no-repeat center;
      background-size: contain;
      background-clip: border-box;
    }
  }
  .bottom-img{
    width: 100%;
    .h(157);
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("../../assets/img/Q4_slices/bottomimage_Q4@2x.png") no-repeat bottom center;
    background-size: contain;
  }
  .alert{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 999;
    text-align: center;
    .alert_content{
      .w(282);
      .h(82);
      background: url("../../assets/img/button_status/window_bg@2x.png") no-repeat center;
      background-size:contain;
      background-clip: border-box;
      text-align: center;

      position: relative;;
      top: 30%;
      .left(51);
      p{
        width: 100%;
        .h(82);
        .fs(16);
        .lh(21);
        .pt(20);
      }
      span{
        img{
          .w(36);
          .h(36);
        }
        position: absolute;
        .right(-25);
        top: 0;
      }
    }
    .alert_bottom{
      width: 100%;
      position: relative;
      a{
        display: inline-block;
        text-align: center;
        .w(120);
        position: absolute;
        left: 0;
        .top(250);
        background: url("../../assets/img/button_status/btn_know@2x.png") no-repeat center;
        background-size: cover;
        .h(60);
        left: 50%;
        .ml(-60);
      }
    }
  }
  @media screen and (min-width: 750px) {
    .content{
      .bj{
        .title{
          p{
            .pl(80);
          }
        }
      }
    }
    .info{
      ul{
        .padding(5,100);
      }
    }
    .btn{
      a{
        img{
          width: 50%;
        }
      }
      a:first-child{
        .left(100)
      }
      a:last-child{
        .right(100)
      }
    }
    .alert{
      .alert_content{
        left: 50%;
        .ml(-141);
      }
      .alert_bottom{
        width: 100%;
        position: relative;
        a{
          img{
            width: 10%;
            object-fit: cover;
          }
        }
      }
    }
  }
}
</style>
